<template>
  <div>
    <input placeholder="请输入任务名称" v-model="inputValue" @keydown.enter="enter">
    <button @click="sendData">给父组件传参</button>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue'

export default defineComponent({
  name: 'NavHeader',
  // 接收父组件传来的参数，不能直接改
  props: {
    msg: {
      // 数据类型校验
      type: String,
      // required: true,
      default: '默认值'
    }
  },
  setup (props, ctx) {
    console.log(props.msg)
    const inputValue = ref('')

    // 子组件给父组件传参数
    const childMsg = ref('子组件给父组件传参数')
    const childNum = ref(10)
    const sendData = () => {
      // 通过ctx.emit分发
      ctx.emit('sendToParent', childMsg.value)
    }

    onMounted(() => {
      ctx.emit('sendToParent', {
        msg: childMsg.value,
        num: childNum.value
      })
    })

    const enter = () => {
      console.log(inputValue.value)
      ctx.emit('add', inputValue.value)
      // 清空输入框
      inputValue.value = ''
    }
    return {
      inputValue,
      enter,
      sendData
    }
  }
})
</script>

<style scoped>
input {
  margin-bottom: 25px;
}
</style>
